<!--
 * @Date: 2024-04-28 16:11:45
 * @Autor: 叶世超
 * @LastEditors: 叶世超 yesc163@163.com
 * @LastEditTime: 2024-05-06 16:09:12
 * @FilePath: \reslib-web\src\views\video\detail.vue
 * @Description: 描述
 * @version: 版本
-->
<template>
  <!-- <el-card style="width: 100%"> -->
  <div class="video-detail" :class="buttonState ? '' : 'full-screen'">
    <div class="vd-left">
      <el-card style="width: 100%" shadow="hover">
        <div class="vd-title"><span>{{ videoForm.name }}</span></div>
        <div class="vdl-top">
          <video v-if="clientWidth !== 0" controls id="my-video-top" class="video-js vjs-default-skin" preload="auto"
            @timeupdate="timeupdate">
            <source :src="videoForm.url" />
          </video>
        </div>
        <!-- </el-card> -->
        <!-- <el-card style="width:100%;margin-top: 20px;" shadow="hover"> -->
        <div class="vdl-bottom" style="width: 100%; margin-top: 20px">
          <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="语音信息" name="first">
              <el-timeline>
                <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                  <el-card>
                    <p>各位观众晚上好，晚上好，今天是7月11号，星期一，农历六月13，欢迎收看新闻联播节目，首先为您介绍今天节目的主要内容。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                  <el-card>
                    <p>党的18大以来，以习近平同志为核心的党中央推动党和国家事业取得历史性成就，发生历史性变革，引领中华民族伟大复兴走过非凡十年。</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item timestamp="00:00:18—00:00:30" placement="top">
                  <el-card>
                    <p>
                      新闻联播从今天开始推出系列报道奋进新征程，建功新时代非凡十年今天首先播出，新时代首都发展，实现历史性跨越，李克强对全国安全生产电视电话会议作出重要批示，强调层层压紧压实安全生产责任和措施，坚决防范遏制重特大事故发生，中共中央办公厅转发中央宣传部、中央组织部关于认真组织学习习近平谈治国理政，第四卷的通知，我国主产区累计收购小麦超过3000万吨，收购进度超过四成，今年上半年，我国水利工程建设投资同比增长59.5%，创历史新高，俄乌冲突持续，美国国内人士指出，美国等西方国家不顾乌克兰人民的利益，目的就是以乌克兰为工具遏制俄罗斯。
                    </p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
            <el-tab-pane label="文本信息" name="second">
              <ul class="tabs-tow-ul">
                <li>
                  <div class="li-time">00:00:19-00:00:36</div>
                  <div class="li-content">
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                  </div>
                </li>
                <li>
                  <div class="li-time">00:00:19-00:00:36</div>
                  <div class="li-content">
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                  </div>
                </li>
                <li>
                  <div class="li-time">00:00:19-00:00:36</div>
                  <div class="li-content">
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                  </div>
                </li>
                <li>
                  <div class="li-time">00:00:19-00:00:36</div>
                  <div class="li-content">
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                  </div>
                </li>
                <li>
                  <div class="li-time">00:00:19-00:00:36</div>
                  <div class="li-content">
                    <div><span class="li-title">标题</span><span class="li-text">百岁山</span></div>
                  </div>
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="视觉信息" name="third">
              <div class="tabs-three-title">
                <span>指示牌/标识牌</span><span>共计出现</span> <span>8次</span><span>|</span><span>28秒</span>
              </div>
              <div class="tabs-three-box">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="" />
                <div class="dot"></div>
                <div class="li-time">00:01:42:05-00:01:44:17</div>
                <div class="li-title">时长</div>
                <div class="li-text">2秒12顿</div>
              </div>
              <div class="tabs-three-box">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="" />
                <div class="dot"></div>
                <div class="li-time">00:01:42:05-00:01:44:17</div>
                <div class="li-title">时长</div>
                <div class="li-text">2秒12顿</div>
              </div>
              <div class="tabs-three-box">
                <img src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt="" />
                <div class="dot"></div>
                <div class="li-time">00:01:42:05-00:01:44:17</div>
                <div class="li-title">时长</div>
                <div class="li-text">2秒12顿</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-card>
    </div>
    <div class="vd-right">
      <el-card style="width: 100%" shadow="hover">
        <div class="r-top-box">
          <div class="rtb-tabs">基本信息</div>
          <el-form :model="form" label-width="auto" style="margin: 20px 0 40px" label-position="left">
            <el-form-item label="封面：" align="top">
              <el-image style="width: 277px; height: 148px" :src="videoForm.thumb" :zoom-rate="1.2" :max-scale="7"
                :min-scale="0.2" :preview-src-list="[videoForm.thumb]" :initial-index="4" fit="cover" /></el-form-item>
            <el-form-item label="描述：">
              <el-input v-model="videoForm.remark" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                placeholder="Please input" resize="none" />
              <!-- <el-input v-model="textarea2" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                placeholder="Please input" resize="none" /> -->
            </el-form-item>
            <el-form-item label="视屏类型：">新闻</el-form-item>
            <el-form-item label="台标：">CCTV-13新闻频道</el-form-item>
            <el-form-item label="栏目名称：">新闻联播</el-form-item>
            <el-form-item label="主持人：">
              <el-link class="rtb-content-margin" href="https://element-plus.org" type="primary" target="_blank"
                underline>宝晓峰</el-link>
              <el-link href="https://element-plus.org" type="primary" target="_blank" underline>郭志坚</el-link>
            </el-form-item>
            <el-form-item label="记者：">
              <el-input v-model="textarea3" :autosize="{ minRows: 4, maxRows: 4 }" type="textarea"
                placeholder="Please input" resize="none" />
            </el-form-item>
          </el-form>
        </div>
        <div class="r-bottom-box">
          <div class="rtb-tabs">人物标签</div>
          <el-form :column="1" title="人脸标签" label-width="auto" label-position="left">
            <h4>人脸标签</h4>
            <el-form-item label="政治人物"></el-form-item>
            <el-form-item label="中国" align="top">
              <div class="demo-fit">
                <div v-for="(item, index) in avatarList" :key="index" class="block">
                  <el-avatar :size="50" fit="cover" :src="item.url" />
                  <span class="title">{{ item.title }}</span>
                </div>
              </div>
            </el-form-item>
            <el-divider />
            <el-form-item label="主持人/记者"></el-form-item>
            <el-form-item label="主持人" align="top">
              <div class="demo-fit">
                <div v-for="(item, index) in avatarList" :key="index" class="block">
                  <el-avatar :size="50" fit="cover" :src="item.url" />
                  <span class="title">{{ item.title }}</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="记者" align="top">
              <div class="demo-fit">
                <div v-for="(item, index) in avatarList" :key="index" class="block">
                  <el-avatar :size="50" fit="cover" :src="item.url" />
                  <span class="title">{{ item.title }}</span>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
  <!-- </el-card> -->
</template>
<script lang="tsx" setup>
import { ref, reactive, toRefs } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import videojs from 'video.js'
import * as videoApi from '@/api/video'
import { useRoute } from 'vue-router'
const route = useRoute()
import 'video.js/dist/video-js.css'
const activeName = ref('first')
const videoForm = ref({})
const buttonState = ref<Boolean>()

const id = route.query.id
const info = async () => {
  videoForm.value = await videoApi.selectOne(id)
  console.log(videoForm.value)
  if (videoForm.value.url) increment()
}
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
const clientWidth = ref(0)
const clientHeight = ref(0)
onMounted(() => {
  info()
  buttonState.value = JSON.parse(route.query.buttonState as string)
  clientWidth.value = window.document.querySelector('.vdl-top')?.clientWidth
  clientHeight.value = window.document.querySelector('.vdl-top')?.clientHeight
})
const timeupdate = (e) => {
  console.log(e)
  console.log(e.target.currentTime)
}
onUnmounted(() => {
  videoIdList.map((item, index) => {
    var player = videojs('my-video' + item)
    player.dispose() // 销毁播放器实例
  })
})
// 定义 videojs 实例
const myPlayer = ref()
const videoIdList = reactive(['-top'])
// videojs 初始化函数
function initVideoSource() {
  console.log(videoIdList)
  videoIdList.map((item, index) => {
    myPlayer.value = videojs('my-video' + item, {
      width: clientWidth.value, //播放器高度
      height: clientHeight.value, //播放器高度
      controls: true, // 是否显示控制条
      preload: 'auto',
      autoplay: false, // 自动播放
      loop: false, // 循环播放
      // fluid: true, // 自适应宽高
      language: 'zh-CN', // 设置语言
      muted: true, // 是否静音
      inactivityTimeout: false,
      // 设置控制条组件
      controlBar: {
        // 设置控制条组件
        //  设置控制条里面组件的相关属性及显示与否
        currentTimeDisplay: true,
        timeDivider: true,
        durationDisplay: true,
        remainingTimeDisplay: false,
        volumePanel: {
          inline: false
        },
        pictureInPictureToggle: false
      },
      userActions: {
        seek: false
      }
    })
  })
}
// DOM更新后执行videojs初始化函数
async function increment() {
  await nextTick()
  initVideoSource()
}
const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]
const textarea2 = ref(
  '1.新闻联播今天推出系列报道奋进新征程,建设新时代非凡十年,新时代首都发展实现历史性跨越,坚决防范遏制重特大事故发生。2.习近平在北京视察,称北京是伟大祖国的首都样板,十年间首都城市现代化治理水亚持绩描强 昆生每补息基提升 国际一流和涨官星之都建设不断取得重大进屏'
)
const textarea3 = ref(
  '马鹏飞     王小节     朱世松     许梦         王胜东     王丰            吴建国     张国强     李瑞         胡华林     李卉         崔岩         李一明      马鹏飞     王小节     朱世松     许梦         王胜东     王丰         吴建国     张国强     李瑞         胡华林     李卉 '
)
const avatarList = [
  { title: '刘一', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '陈二', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '张三', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '李四', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' },
  { title: '王五', url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' }
]
</script>

<style lang="scss" scoped>
.full-screen {
  height: calc(100vh - 20px - 20px);
  overflow: auto; // 显示滚动条，根据内容决定是否显示
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none; // Firefox
  -ms-overflow-style: none; // IE and Edge */
}
.el-timeline {
  padding-left: 0;
}

.tabs-tow-ul {
  li::before {
    content: '';
    // height: 40px;
    // line-height: 40px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    margin-right: 20px;
    margin-top: 0.5rem;
    background-color: #cccccc;
  }

  li {
    // height: 40px;
    // line-height: 40px;
    // margin: 20px 0;
    display: flex;
    justify-content: flex-start;

    // align-items:center;
    .li-time {
      // margin-top: 20px;
    }

    .li-content {
      margin-left: 30px;

      div {
        margin-bottom: 20px;

        .li-title {
          // margin: 20px 0;
          margin-right: 100px;
        }
      }
    }
  }
}

.tabs-three-title {
  margin-bottom: 15px;

  span:nth-child(1) {
    color: #006eff;
    font-weight: bold;
    margin-right: 20px;
  }

  span:nth-child(2) {}

  span:nth-child(3) {
    color: #006eff;
    margin-left: 10px;
  }

  span:nth-child(4) {
    color: #006eff;
    margin-right: 10px;
    margin-left: 10px;
  }

  span:nth-child(5) {
    color: #006eff;
  }
}

.tabs-three-box {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  div:nth-child(2) {
    margin-right: 10px;
  }

  div:nth-child(3) {
    margin-right: 300px;
  }

  div:nth-child(4) {
    margin-right: 30px;
  }

  img {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }

  // .dot {
  //   height: 5px;
  //   /* 圆点的高度 */
  //   width: 5px;
  //   /* 圆点的宽度 */
  //   background-color: #bbb;
  //   /* 圆点的颜色 */
  //   border-radius: 50%;
  //   /* 圆形的关键点是将border-radius设置成50% */
  //   display: inline-block;
  //   /* 使其成为行内块元素以便与后续文本正确显示 */
  // }
  img::after {
    height: 5px;
    /* 圆点的高度 */
    width: 5px;
    /* 圆点的宽度 */
    background-color: #bbb;
    /* 圆点的颜色 */
    border-radius: 50%;
    /* 圆形的关键点是将border-radius设置成50% */
    display: inline-block;
    /* 使其成为行内块元素以便与后续文本正确显示 */
  }
}

::v-deep(.vjs-big-play-button) {
  top: calc((350px - 1.63332em) / 2);
  left: calc((647px - 3em) / 2);
}

.demo-fit {
  display: flex;
  text-align: center;
  justify-content: flex-start;
}

.demo-fit .block {
  display: flex;
  flex-direction: column;
  margin-right: 50px;
}

.demo-fit .title {
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.video-detail {
  padding: 20px;
  display: flex;
  justify-content: space-between;

  .vd-left {
    padding-right: 20px;
    width: 55%;
    height: 100%;
    box-sizing: border-box;

    .vd-title {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
      font-size: 20px;
    }

    .vdl-top {
      height: 350px;

      video {
        width: 100%;
        height: 100%;
      }
    }

    .vdl-bottom {}
  }

  .vd-right {
    width: 45%;
    height: 100%;

    .r-top-box {}

    .r-bottom-box {}

    .rtb-tabs {
      position: relative;
      left: -20px;
      width: 150px;
      height: 40px;
      line-height: 40px;
      border-radius: 0px 10px 10px 0px;
      opacity: 1;
      background: #3a8fea;
      box-sizing: border-box;
      border: 1px solid #c6d9ff;
      text-align: center;
      font-family: Microsoft YaHei;
      font-size: 20px;
      letter-spacing: 0em;
      color: #ffffff;
    }

    .rtb-content-margin {
      margin-right: 10px;
    }
  }
}
</style>
